import React, { Component } from 'react';
import styles from './css/charts.module.css';
import ReactEcharts from 'echarts-for-react';

export default class Charts extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: {},
            opts: {},
            events: {
                'mouseover': this.mouseoverEcharts,
                'mouseout': this.mouseoutEcharts
            }
        }
    }
    componentDidMount() {
        this.setState({
            data: {...this.props.data}
        });
    }
    mouseoverEcharts = (args) => {
        const getOption = this.refs.ReactEcharts.getEchartsInstance().getOption()
        var seriesIndex = args.seriesIndex,
            componentType = args.componentType,
            seriesType = args.seriesType;
        if (componentType === 'series' && seriesType === 'line') {
            const option = JSON.parse(JSON.stringify({...this.state.data, ...getOption}))
            const series = option.series;
            series[seriesIndex].label.show = true;
            this.refs.ReactEcharts.getEchartsInstance().setOption({
                series: series
            });
        }
    }


    mouseoutEcharts = (args) => {
        const getOption = this.refs.ReactEcharts.getEchartsInstance().getOption();
        console.log(getOption);
        const seriesIndex = args.seriesIndex,
            componentType = args.componentType,
            seriesType = args.seriesType;
        if (componentType === 'series' && seriesType === 'line') {
            const option = JSON.parse(JSON.stringify({...this.state.data,...getOption}));
            const series = option.series;
            series[seriesIndex].label.show = false;
            this.refs.ReactEcharts.getEchartsInstance().setOption({
                series: series
            });
        }
    }

    render() {
        return (
            <div className={styles.root}>
                <p>显示表格</p>
                <div className={styles.chartsContainer} id='chartsContainer'>
                    <ReactEcharts
                        notMerge={false}
                        ref={'ReactEcharts'}
                        lazyUpdate={false}
                        option={this.state.data}
                        onEvents={this.state.events}
                        className='react_for_echarts' />
                </div>
            </div>
        )
    }
}
